<template>
  <div class="mod-sys-folder">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="folderName"
                  class="folder-search-input"
                  placeholder="文件夹关键词">
        </el-input>
        <el-button type="primary"
                   size="mini"
                   class="folder-add-btn"
                   @click="addOrUpdateHandle()">新增</el-button>

        <el-tree :data="data"
                 node-key="id"
                 :filter-node-method="filterNode"
                 ref="tree2"
                 :props="props">

          <span class="custom-tree-node"
                slot-scope="{ node, data }">
            <span @click="() => getFileDataList(node ,data)" style="width: 100%;">{{ node.label }}</span>
            <span>
              <el-button type="text"
                         icon="el-icon-edit"
                         size="small"
                         @click="() => update(node, data)">
                修改
              </el-button>
              <el-button type="text"
                         icon="el-icon-delete"
                         size="small"
                         @click="() => remove(node, data)">
                删除
              </el-button>
            </span>
          </span>
        </el-tree>

        <add-or-update v-if="addOrUpdateVisible"
                       ref="addOrUpdate"
                       @refreshDataList="getDataList"></add-or-update>
      </el-col>
      <el-col :span="18" style="border-left: 1px solid #ebeef5;">
        <folder-table ref="floderTable" :folderId="folderIdTable" :folderName="folderNameTable"></folder-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AddOrUpdate from './folder-add-or-update'
import FolderTable from './file-table'
import { treeDataTranslate } from '@/utils'
export default {
  data () {
    return {
      addOrUpdateVisible: false,
      folderName: '',
      data: [],
      props: {
        id: 'id',
        label: 'folderName',
        children: 'children'
      },
      folderIdTable: 0,
      folderNameTable: '当前文件夹'
    }
  },
  created () {
    this.getDataList()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.floderTable.init()
    })
  },
  components: {
    AddOrUpdate,
    FolderTable
  },
  watch: {
    folderName (val) {
      this.$refs.tree2.filter(val)
    }
  },
  methods: {
    getDataList () {
      this.$http({
        url: this.$http.adornUrl('/admin/folder/list/0'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        var newData = [];
        data.forEach((v,k,i)=>{
          var ex = false;
          if(v.fatherId != null){
            var fatherId = v.fatherId;
            data.forEach((c,l)=>{
              if(c.id != null && c.id == fatherId){
                ex = true
              }
            })
          } else {
            ex = true
          }
          if(ex == true){
            newData.push(v)
          }
        })
        let treeData = treeDataTranslate(newData, 'id', 'fatherId')
        this.data = treeData
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },

    // 删除
    deleteHandle (id) {
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/admin/folder/del'),
          method: 'delete',
          data: this.$http.adornData([id], false)
        }).then(({ data }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        })
      }).catch(() => { })
    },
    update (node, data) {
      this.addOrUpdateHandle(data.id)
    },

    remove (node, data) {
      this.deleteHandle(data.id)
    },

    filterNode (value, data) {
      if (!value) return true
      return data.folderName.indexOf(value) !== -1
    },

    // 获取当前文件夹下的文件
    getFileDataList(node, data){
      this.folderIdTable = data.id
      this.folderNameTable = data.folderName
      this.$nextTick(() => {
        this.$refs.floderTable.init()
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.mod-sys-folder {
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .folder-search-input {
    width: 30%;
  }
  .folder-add-btn {
    float: right;
  }
}
</style>
